<template>
    <div class="full-screen-loading">
        <!--半黑的蒙版-->
        <v-bord>
            <div slot="cantClick" @click="$emit('clickFn')" class="com_black" :class="{'black-opacity1':loading.isNeedBloack}"></div>
        </v-bord>
        <!--gif图-->
        <img class="loading" src="../../../assets/images/common/loading.gif" alt=""/>
    </div>
</template>

<script>
    export default {
        name: "FullScreenLoading",
        props:{
            loadingProp:{
                type:Object
            }
        },
        mounted(){
            this.loading = Object.assign({},this.loading,this.loadingProp);
        },
        data(){
            return{
                loading:{
                    isNeedBloack:false,//是否需要全黑蒙版
                }
            }
        },
        components:{
            'v-bord':()=>import('../../../components/commonComponents/alert/Bord')
        }
    }
</script>

<style scoped>
    .full-screen-loading /deep/ .black-opacity1{
        background-color: rgba(0,0,0,1);
    }
    .loading{
        position: fixed;
        bottom: 0;
        right: 0;
        left: 0;
        top: 0;
        margin: auto;
        width: 100px;
        height: 100px;
        z-index: 1050;
    }
</style>